<template>
  <div>
       <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
        <el-row>
            <el-col>
                <el-button type='primary'>添加分类</el-button>
            </el-col>
        </el-row>

        <!-- 表格 -->
        <tree-table :data='cateList' :columns='columns' :selection-type='false' :expand-type='false' show-index index-text='#' border :show-row-hover='false'>
            <template slot="isok" slot-scope="scope">
                <i class="el-icon-success" v-if="scope.row.cat_deleted===false" style="color:lightgreen"></i>
                 <i class="el-icon-error" v-else style="color:lightgreen"></i>
            </template>
        </tree-table>
        <!-- 分类区域 -->
    </el-card>

  </div>
</template>

<script>
export default {
    data() {
        return {
            //查询条件
            queryInfo:{
                type:3,
                pageNum:1,
                pageSize:5
            },
            //商品分类的数据列表，默认为空
            cateList:[],
            //总数据条数
            total:0,
            //为table指定列的定义
            columns:[{
                label:'分类名称',
                prop:'cat_name',

            },
            {
                label:'是否有效',
                //表示，经当前列定义为模板列
                type:'template',
                //表示当前这一列使用模板名称
                template:'isok'
            }
            ]
        }
    },
    created() {
        this.getCateList()
    },
    methods: {
        //获取商品分类数据
        async getCateList(){
            const{data:res} = await this.$http.get('categories',{params:this.queryInfo})
            if(res.meta.status!==200){
                return this.$message.error('获取商品分类数据失败')
            }
            console.log(res.data);
            this.cateList=res.data;
            this.total=res.data.total;
        }
    },
}
</script>

<style scoped lang='less'>

</style>